import React from 'react';
class model extends React.Component {
    render() {
      let {isShow,children,onClose} = this.props;
      if(!Array.isArray(children)){
        // 若children属性 不是一个数组的时候 我们把它转成一个数组
        children = children ? [children] : []
      }
      console.log(children)
      let header=[],main=[],footer=[];
      children.forEach(item=>{
        // 根据 item的 props中的 qqq属性 来决定 这个虚拟DOM 是那部分
        switch (item.props.qqq) {
          case 'header':
            header = header.concat(item)
            break;
          case 'footer':
            footer = footer.concat(item)
            break;
          default:
            main = main.concat(item)
            break;
        }
      })
        return <>
          {
            isShow ? 
            <div className='box' onClick={onClose}>
                <div className="content">
                    <header>{header.length ? header : '默认头'}</header>
                    <main>{main.length ? main : '默认身体'}</main>
                    <footer>{footer.length ? footer : '默认尾部'}</footer>
                </div>
            </div>:
            <></>
          }
        </>
    }
}
export default model